<template>
  <div>
    <el-button type="primary" @click="modalShow = true">{{ $t('common.base.create') }}</el-button>
    <el-table class="mar-t-16" :data="page.list" border header-row-class-name="common-list-table-header__v2"
      row-class-name="customer-event-table-row" header-cell-class-name="table-title" style="width: 100%" height="500">
      <el-table-column prop="commentContent" :label="$t('faultLibrary.detail.remark.label1')" :show-overflow-tooltip="true">
        <!-- <template slot-scope="scope">{{}}</template> -->
      </el-table-column>
      <el-table-column prop="attachment" :label="$t('common.form.type.attachment')" width="80">
        <template slot-scope="scope">
          <el-button v-if="scope.row.attribute && scope.row.attribute.attachment.length" @click="showFile(scope.row)" type="text">{{ $t('common.base.view') }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="user" :label="$t('faultLibrary.detail.remark.label2')">
        <template slot-scope="scope">
          <template v-if="isOpenData">
            <open-data type="userName" :openid="scope.row.userInfoVO.staffId"></open-data>
          </template>
          <template v-else>
            {{ scope.row.userInfoVO.displayName || scope.row.userInfoVO.name }}
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" :label="$t('faultLibrary.detail.remark.label3')">
        <template slot-scope="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <template #empty>
        <NoDataViewNew></NoDataViewNew>
      </template>
    </el-table>
    <div class="flex-x al-center pad-t-16">
      <div class="flex-1">
        {{ $t('common.base.table.totalPiece', { count: page.total }) }}
      </div>
      <el-pagination background :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="page.pageSize" :current-page="page.pageNum" layout="sizes,prev, pager,next, jumper" :total="page.total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </div>

    <base-modal :title="`${$t('common.base.create')}${$t('common.base.comment')}`" :show.sync="modalShow">
      <form-builder ref="formDom" :fields="fields" :value="formValue" @update="updateForm"></form-builder>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modalShow = false">{{ $t('common.base.cancel') }}</el-button>
        <el-button type="primary" @click="modalConfirm" :loading="btnLoading">{{ $t('common.base.confirm') }}</el-button>
      </div>
    </base-modal>

    <base-modal :title="$t('common.base.view')" :show.sync="fileModalShow">
      <form-view :fields="fileFields" :value="fileFormValue"></form-view>
    </base-modal>
  </div>
</template>
<script>
import { defineComponent, ref, watch, nextTick } from 'vue';
import Page from '@model/Page.ts';
import NoDataViewNew from '@src/component/common/NoDataViewNew/NoDataViewNew.vue';
import { getRemarkList, addRemark } from '@src/api/Fault';
import { notification, isOpenData } from '@src/util/platform';
import { t } from '@src/locales';
import { cloneDeep } from 'lodash';
import { formatDate } from 'pub-bbx-utils';
export default defineComponent({
  name: 'RemarkList',
  components: { NoDataViewNew },
  props: {
    pageData: {
      type: Object,
      defautl: () => ({}),
    },
  },
  setup(props) {
    const baseFormValue = {
      commentContent: '',
      attachment: [],
    };
    const page = ref(new Page());
    const modalShow = ref(false);
    const fileModalShow = ref(false);
    const formDom = ref(null);
    const fileFormValue = ref({});
    function showFile(item) {
      fileModalShow.value = true;
      fileFormValue.value = {
        attachment: item.attribute.attachment,
      };
    }
    watch(
      () => modalShow.value,
      value => {
        if (value === true) {
          nextTick(() => {
            formDom.value.$children.map(child => {
              if (child.$el.className.includes('err')) {
                console.log(child.$el, 'child.$el')
                child.$el.dispatchEvent(new CustomEvent('form.clear.validate', { bubbles: false }));
              }
            });
          });
        }else{
          formValue.value = cloneDeep(baseFormValue);
        }
      }
    );
    const fields = [
      { fieldName: 'commentContent', formType: 'textarea', displayName: t('faultLibrary.detail.remark.label1'), maxlength: 100, isNull: 0 },
      { formType: 'attachment', fieldName: 'attachment', displayName: t('common.form.type.attachment'), isNull: 1 },
    ];
    const fileFields = [{ formType: 'attachment', fieldName: 'attachment', displayName: t('common.form.type.attachment'), isNull: 1, isSystem: 1 }];
    const formValue = ref(cloneDeep(baseFormValue));
    const btnLoading = ref(false);
    function handleCurrentChange(pageNum) {
      page.value.pageNum = pageNum;
      getListData();
    }
    function handleSizeChange(pageSize) {
      page.value.pageSize = pageSize;
      getListData();
    }
    function getListData(refresh = false) {
      if (refresh) {
        page.value.pageNum = 1;
      }
      const { pageSize, pageNum } = page.value;

      getRemarkList({
        dataId: props.pageData.id,
        pageSize,
        pageNum,
      }).then(res => {
        if (res.status === 0) {
          page.value = res.data;
          page.value.total = res.data.totalSize;
        } else {
          notification({
            type: 'error',
            message: res.message,
          });
        }
      });
    }

    async function modalConfirm() {
      let res = await formDom.value.validate();
      if (!res) return;
      btnLoading.value = true;
      addRemark({
        commentContent: formValue.value.commentContent,
        dataId: props.pageData.id,
        dataType: props.pageData.type === 'obj' ? 1 : 2,
        attribute: {
          attachment: formValue.value.attachment,
        },
      })
        .then(res => {
          if (res.status === 0) {
            getListData(true);
          }
          modalShow.value = false;
        })
        .finally(() => {
          btnLoading.value = false;
        });
    }

    function updateForm({ field, newValue }) {
      formValue.value[field.fieldName] = newValue;
    }

    getListData();

    return {
      page,
      getListData,
      handleSizeChange,
      handleCurrentChange,
      modalShow,
      fields,
      formValue,
      btnLoading,
      modalConfirm,
      updateForm,
      formDom,
      fileModalShow,
      formatDate,
      isOpenData,
      showFile,
      fileFields,
      fileFormValue,
    };
  },
});
</script>
<style lang="scss" scoped>
@import './table.scss';
</style>
